<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/together.css" rel="stylesheet" />

		<style type="text/css">
			.ws_cover {
				width: 7.0rem;
				height: 8.0rem;
				border: 1px solid #ccc;
				margin-top: 1rem;
			}
			
			.ws_radio {
				width: 80%;
				position: relative;
			}
			
			.ws_books_btn {
				width: 80%;
				margin: 2rem auto 0.5rem;
			}
			
			.ws_name {
				width: 90%;
				line-height: 50px;
				height: 50px;
			}
			
			.fmdivmain {
				width: 50vw;
				height: calc(50vw * 1.41);
				/*width: calc(90vw);
				height: calc(90vw * 1.414);*/
				box-shadow: 0 0 5px rgba(0,0,0,.2);
				margin: 0.5em auto;
				position: relative;
				background-color: white;
				overflow: hidden;
			}
			
			.ws_name {
				margin-top: 0;
			}
			
			.flex1 {
				padding-top: 1rem;
			}
			
			.fmimgdiv {
				width: 100%;
				margin: 0;
				padding: 0;
				border: 0;
			}
			
			.fmimgdiv>img {
				width: 100%;
			}
			
			.fmdata {
				width: 100%;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
			}
			
			.logodiv {
				
				bottom: 2%;
				width: 100%;
				font-size:.8em;
				text-align: center;
			}
			
			.jjdiv {
				width: 95%;
				bottom: 10%;
				font-size: .8em;
				font-family: '微软雅黑';
				text-align: center;
				padding: 0.2em 0;
				word-wrap: break-word;
    			word-break: break-all;
			}
			
			.smdiv {
				width: 100%;
				font-size: 1em;
				font-family: '微软雅黑';
				font-weight: 600;
				text-align: center;
				padding: 0 0 0.5em 0;
			}
			
			.zzdiv {
				width: 100%;
				font-size: .8em;
				font-family: '微软雅黑';
				text-align: center;
				padding: .2em 0;
			}
			
			.mui-content {
				overflow: hidden;
			}
		</style>
	</head>

	<body>

		<header class="mui-bar mui-bar-nav m_barC">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">新建书籍</h1>
		</header>
		<div class="mui-content">
			<div class="fmdivmain" id="fmdivmain">
				<div class="fmimgdiv">
					<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-21
                    	描述：
					<img src="http://ws.rovine.cn/uploads/20190118/7b7074182a2da8a1fea6e82b0ba01df9.png" />
                    -->
					<img src="img/fm01.png" />
				</div>
				<div class="fmdata">
					<div class="smdiv" id="smid">
						了不起的平凡
					</div>
					<div class="zzdiv" id="zzid">

					</div>
					<div class="jjdiv" id="jjid">
						标语
					</div>
				</div>
				<!--<div class="logodiv">
					logo
				</div>-->
			</div>
			<div class="">
				<!--
                	作者：592176224@qq.com
                	时间：2019-01-21
                	描述：
				<div class="flex1">
					<div class="ws_cover ws_100">
						<img id="fmimgid1" src="../images/books_hea.png" alt="">
					</div>
				</div>
                -->

				<div class="flex1">
					<div class="ws_name">
						<span id="">书名:</span>
						<input id="bookname" value="" maxlength="12" class="mui-input-clear" placeholder="了不起的平凡(点击修改)" type="text">
					</div>

				</div>
				<div class="flex1">
					<div class="ws_name">
						<span id="">标语:</span>
						<input id="bookjj" value="" maxlength="100" class="mui-input-clear" placeholder="选填" type="text">
					</div>

				</div>

				<!--<div class="ws_permissions ">
					<span class="ws_power">私密</span> 
					
					<div class="mui-switch mui-switch-mini ws_books_qbtn" id="mySwitch">
					  <div class="mui-switch-handle"></div>
					</div>
					<span class="ws_power">公开</span> 
					<span class="private ">(仅邀请的成员可见)</span>  
					<span class="open hide">(对所有人可见)</span>
					|<div class="mui-input-row mui-radio mui-left flex1" >
						<div class="ws_radio">
							<label for="public">公开(对所有人可见)</label>
							<input name="radio1" id="public" type="radio">
						</div>
					</div>
					<div class="mui-input-row mui-radio mui-left flex1">
						<div class="ws_radio">
							<label for="private">私密(仅邀请的人可见)</label>
							<input name="radio1" id="private" type="radio">
						</div>
					</div>|
				</div>-->

				<div class="ws_books_btn flex1">
					<a id="reg" onclick="goaddcent()">新建书籍</a>
					<!--
                    	作者：592176224@qq.com
                    	时间：2019-01-18
                    	描述：
                    	<a id="Invitation" >邀请好友</a>
                    -->
				</div>
			</div>
<!--
			<img id="testimgid" src="" />
			<img id="testimgid1" src="" />-->

		</div>

		<script src="../js/jquery.min.js"></script>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/app.js"></script>
		<script src="../js/html2canvas.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/canvas2image.js" type="text/javascript" charset="utf-8"></script>
		<script>
			window.onload = function() {
				let zname = localStorage.getItem("zname");
				g("zzid").innerHTML = zname;

				$('#bookname').bind('input propertychange', function() {
					let val = $(this).val();
					//console.log(val)
					g("smid").innerHTML = val;
				});
				$('#bookjj').bind('input propertychange', function() {
					let val = $(this).val();
					//console.log(val)
					g("jjid").innerHTML = val;
				});

			}

			function getId(id) {
				return document.getElementById(id);
			}

			function goaddcent() {
				 var cntElem = g("fmdivmain");
 
			    var shareContent = cntElem;//需要截图的包裹的（原生的）DOM 对象
			    var width = shareContent.offsetWidth; //获取dom 宽度
			    var height = shareContent.offsetHeight; //获取dom 高度
			    var canvas = document.createElement("canvas"); //创建一个canvas节点
			    var scale = 2; //定义任意放大倍数 支持小数
			    canvas.width = width * scale; //定义canvas 宽度 * 缩放
			    canvas.height = height * scale; //定义canvas高度 *缩放
			    canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 
			    var opts = {
			        scale: scale, // 添加的scale 参数
			        canvas: canvas, //自定义 canvas
			        // logging: true, //日志开关，便于查看html2canvas的内部执行流程
			        width: width, //dom 原始宽度
			        height: height,
			        useCORS: true // 【重要】开启跨域配置
			    };
				
			/*	html2canvas(shareContent, opts).then(function (canvas) {
 
			        var context = canvas.getContext('2d');
			        // 【重要】关闭抗锯齿
			        context.mozImageSmoothingEnabled = false;
			        context.webkitImageSmoothingEnabled = false;
			        context.msImageSmoothingEnabled = false;
			        context.imageSmoothingEnabled = false;
			        
			        // 【重要】默认转化的格式为png,也可设置为其他格式
			       /* var img = Canvas2Image.convertToJPEG(canvas, canvas.width, canvas.height);
			 
			        document.body.appendChild(img);
			 
			        $(img).css({
			            "width": canvas.width / 2 + "px",
			            "height": canvas.height / 2 + "px",
			        }).addClass('f-full');
			 
			    });*/

				
				
				//return;
				
//				let fdiv = g("fmdivmain");
				html2canvas(cntElem, {
						allowTaint: true,
						taintTest: false,
						onrendered: function(canvas) {
							var base64 = canvas.toDataURL();
							let data3 = {
								url: '/api/Image/uploadBase64',
								data: {
									access_token: acctoken(),
									base64: base64
								}
							}
							//$("#testimgid").attr("src",base64)
							//return;
							ajaxbase64(data3, function(res) {

								let data = {
									url: "/api/Book/add_book",
									data: {
										access_token: acctoken() || "",
										title: g("bookname").value || "了不起的平凡",
										mid: res.data[0].mid,
										introduction: g("bookjj").value || "",
										status: 1,
										bid: "",
									}
								}
								ajax(data, function(res2) {
									if(res2.code == -1) {
										mui.toast(res2.message);
									}
									if(res2.code == 1) {
										mui.toast("书籍添加成功");
										let bid = res2.data[0].bid;
										let list = {
											bid: bid
										}
										mui.openWindow({
											url: 'books_detas.html?bid=' + bid,
											id: 'books_detas',
											extras: list,
										});
									}
								});
							})
						}
				})

			}
		</script>
	</body>

</html>